<template>
  <div style="width:100%;height:99%;margin-top:2px;">
    <div style="width:48%;height:98%;float:left;margin-left:5px;">
      <div style="width:99%;height:100%;margin:2px 2px;border:4px solid #019BA0;">
           <el-row>
             <el-col :span="24"><div style="text-align: center;margin: 10px;font-size: 20px;color:#019BA0;"> <i class="el-icon-s-claim"></i>静态属性</div></el-col>
           </el-row>
           <el-table class="tab1"
               :data="staticData"
               stripe
               height="500"
               style="width:95%">
               <el-table-column prop="describe" label="属性" width="230"></el-table-column>
               <el-table-column prop="unit" label="单位" width="100"></el-table-column>
               <el-table-column label="操作" width="150">
                   <template slot-scope="scope">
                         <el-button size="mini" @click="goStaUpdate(scope.row)" round>修改</el-button>
                          <el-popconfirm
                              cancelButtonText="取消"
                              confirmButtonText="确定"
                              icon="el-icon-info"
                              iconColor="red"
                              title="确定要删除吗？"
                              @confirm='delSta(scope.row.id)'>
                             <el-button slot="reference"  type="danger" size="mini" round>删除</el-button>
                          </el-popconfirm>
                   </template>
               </el-table-column>
           </el-table>
           <el-row>
             <el-col :span="24" style="text-align: center;margin-top: 10px;">
               <el-button type="success" @click="addVisible=true;addSta()" class="btn1" plain>添加</el-button>
             </el-col>
           </el-row>
      </div>
    </div>
    <div style="width:50%;height:98%;float:left;margin-left:7px;">
      <div style="width:99%;height:100%;margin:2px 2px;border:4px solid #019BA0;">
          <el-row>
            <el-col :span="24"><div style="text-align: center;margin: 10px;font-size: 20px;color:#019BA0;"> <i class="el-icon-loading"></i>实时属性</div></el-col>
          </el-row>
          <el-table class="tab1"
              :data="surveyData"
              stripe
              height="500"
              style="width:95%">
              <el-table-column prop="describe" label="属性" width="250"></el-table-column>
              <el-table-column prop="unit" label="单位" width="100"></el-table-column>
              <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                        <el-button size="mini" @click="goSuvUpdate(scope.row)" round>修改</el-button>
                         <el-popconfirm
                             cancelButtonText="取消"
                             confirmButtonText="确定"
                             icon="el-icon-info"
                             iconColor="red"
                             title="确定要删除吗？"
                             @confirm='delSuv(scope.row.id)'>
                            <el-button slot="reference"  type="danger" size="mini" round>删除</el-button>
                         </el-popconfirm>
                  </template>
              </el-table-column>
          </el-table>
          <el-row>
            <el-col :span="24" style="text-align: center;margin-top: 10px;">
              <el-button type="success" @click="addVisible=true;addSuv()" class="btn1" plain>添加</el-button>
            </el-col>
          </el-row>
      </div>
    </div>
    <!--框 -->
    <el-dialog :title="tit" :visible.sync="addVisible" :closeOnClickModal='false' :show-close='false'>
        <el-form  :model="div" :rules="rules" ref="ruleForm">
        <el-row>
            <el-col :span="10">
            <el-form-item label="属性名称" label-width="80px" prop="describe">
                <el-input v-model="div.describe" placeholder="请输入属性名"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="10">
            <el-form-item label="计量单位" label-width="80px" prop="unit">
                <el-input v-model="div.unit" placeholder="请输入计量单位"></el-input>
            </el-form-item>
        </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false;closeForm('ruleForm')">关 闭</el-button>
            <el-button type="primary" @click="doDev('ruleForm')">{{doName}}</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data(){
      return{
         stockId:0,
         surveyData:[],
         staticData:[],
         addVisible:false,
         tit:'',
         doName:'',
         url:'',
         div:{
           id:'',
           describe:'',
           unit:'',
           stockId:'',
         },
         rules:{
           describe: [{
             required: true,
             message: '不能为空',
             trigger: 'blur'
           }],
           unit: [{
              required: true,
              message: '不能为空',
              trigger: 'blur'
            }],
         },

      }
    },
    methods: {
      getStatic(id){
        this.axios.get("/device/getStaticAll?id="+id).then(res=>{
          console.log(res.data.data)
          this.staticData=res.data.data;
        })
      },
      getSurvey(id){
        this.axios.get("/device/getSurveyAll?id="+id).then(res=>{
          this.surveyData=res.data.data;
        })
      },
      closeForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
      },
      clear(){
        this.div.id='';
        this.div.describe='';
        this.div.unit='';
        this.div.stockId='';
      },
      addSta(){
        this.clear();
        this.tit="静态属性添加";
        this.doName="添 加";
        this.url="/device/addStatic";
        this.div.stockId=this.stockId;
      },
      addSuv(){
        this.clear();
        this.tit="动态属性添加";
        this.doName="添 加";
        this.url="/device/addSurvey";
        this.div.stockId=this.stockId;
      },
      goStaUpdate(device){
         this.tit="静态属性修改";
         this.doName="修 改";
         this.url="/device/updateStatic";
         this.div.id=device.id;
         this.div.describe=device.describe;
         this.div.unit=device.unit;
         this.div.stockId=device.stockId;
         this.addVisible=true;
      },
      goSuvUpdate(device){
         this.tit="动态属性修改";
         this.doName="修 改";
         this.url="/device/updateSurvey";
         this.div.id=device.id;
         this.div.describe=device.describe;
         this.div.unit=device.unit;
         this.div.stockId=device.stockId;
         this.addVisible=true;
      },
      doDev(ruleForm){
          this.$refs[ruleForm].validate((valid) => {
              if (valid) {
                this.axios.post(this.url,this.div).then(res=>{
                  if(res.data.code=200){
                     this.addVisible=false;
                     this.getStatic(this.stockId);
                     this.getSurvey(this.stockId);
                     this.sucMsg(res.data.msg);
                  }

                });

              }
          })
      },
      delSta(id){
         this.axios.get("/device/delStatic?id="+id).then(res=>{
             if(res.data.code=200){
                 this.getStatic(this.stockId);
                this.sucMsg("删除成功");
             }
         })
       },
       delSuv(id){
          this.axios.get("/device/delSurvey?id="+id).then(res=>{
              if(res.data.code=200){
                 this.getSurvey(this.stockId);
                 this.sucMsg("删除成功");
              }
          })
        },
        sucMsg(msg) {
              this.$message({
                message: msg,
                offset:250,
                duration:1000,
                type: 'success'
              });
        },
        errorMsg(msg) {
            this.$message.error({
              message: msg,
              offset:150,
              duration:1000
            });
        }
    },
    created(){

    },
    watch: {
        '$route' () {
          // 监听路由变化，获取basseid
          this.stockId = this.$route.params.id;
        },
        'stockId' () {
    	  // 监听 id，发生改变就调用方法
          this.getStatic(this.stockId);
          this.getSurvey(this.stockId);
          this.div.stockId=this.stockId;
        }
    }
  }
</script>

<style scoped="scoped">

  .el-container {
    margin: 0;
    padding: 0;
    margin-top:5px;
    margin-left: 5px;
    width:1300px;
    height:640px;
  }
  .el-aside {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border:5px solid #F3F3F3;
    text-align: center;
  }

  .el-main {
    margin: 0;
    padding: 0;
    margin-left:3px;
    border:5px solid #F3F3F3;
    background-color: #ffffff;
    color: #333;
  }

  .el-submenu{
    width:200px;
  }
  .el-menu-item{
  }
  .is-active{
    font-size: 18px;
    background-color: aquamarine;
  }
 .tab1{
      margin-left: 10px;
  }
  .pag{
      text-align: center;
      margin-top:-20px;
      margin-bottom: 10px;
  }
  .bbb{
      width:1025px;
      height:280px;
  }

</style>
